<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/course.css">
   <link rel="icon" href="../favicon.ico" type="image/x-icon">
    <style>
        /* 严格基于原有CSS框架补充样式，不覆盖核心样式 */
        .nav-item.active {
            background-color: #5725bc;
            color: white;
            font-weight: bold;
            border-radius: 20px;
        }
        
        /* 课程列表核心布局 - 确保不突破框架 */
        .course {
            display: flex;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;
            list-style: none;
            width: 100%; /* 限制列表宽度为父容器宽度 */
            box-sizing: border-box;
			gap: 10px;
        }
        
        .course-item {
            width: 25%;
            padding: 0 0px;
            margin: 0 0 0px 0; /* 仅保留底部间距，减少空隙 */
            box-sizing: border-box; /* 确保内边距不影响总宽度 */
            float: right; /* 保持原有浮动布局特性 */
            transition: all 0.3s ease;
        }
        
        /* 确保卡片灰色底色显示（继承原有CSS） */
        .course-item > a, .s1 {
            display: block;
            width: 100%;
            background-color: #f9f9f9; /* 强制显示灰色底，与原有CSS呼应 */
            border-radius: 6px; /* 保持原有圆角 */
            overflow: hidden; /* 防止内容溢出卡片 */
        }
        
        /* 动态显示控制 */
        .course-item.hidden {
            display: none !important;
            height: 0;
            padding: 0;
            margin: 0;
        }
        
        .course-item:not(.hidden) {
            animation: fadeIn 0.4s ease forwards;
        }
        
        /* 悬停效果 - 增强免费课程的视觉反馈 */
        .course-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .course-item[data-price="free"]:hover {
            box-shadow: 0 6px 12px rgba(46, 125, 50, 0.2);
        }
        
        /* 搜索框样式匹配原有风格 */
        .search input:focus {
            border-color: #7b1fa2;
            box-shadow: 0 0 0 2px rgba(123, 26, 162, 0.1);
            outline: none;
        }
        
        /* 淡入动画 - 平滑过渡 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .highlight {
            background-color: #5725bc; 
            color: white; 
            padding: 1px 8px;
            border-radius: 100px;
            font-weight: 500;
            margin: 0 2px;
        }
        
        /* 免费课程特殊标识 */
        .free-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #2e7d32;
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
            z-index: 2;
        }
        
        .course-item[data-price="free"] {
            border: 2px solid #5725bc;
        }
        
        .course-item[data-price="free"] .text1 {
            border-top: 2px solid #5725bc;
        }
        
        /* 付费课程样式 */
        .course-item[data-price="paid"] {
            border: 2px solid #ddd;
            opacity: 0.9;
        }
        
        /* 自适应布局 - 确保各尺寸下不突破框架 */
        @media (max-width: 1024px) {
            .course-item {
                width: calc(25% - 10px); 
            }
        }
        
        @media (max-width: 768px) {
            .course-item {
                width: 50%; /* 两列 */
            }
        }
        
        @media (max-width: 480px) {
            .course-item {
                width: 100%; /* 单列 */
                padding: 0; /* 小屏幕取消内边距 */
            }
        }
        
        /* 清除浮动，确保父容器正确包裹子元素 */
        .box1::after {
            content: "";
            display: table;
            clear: both;
        }
        
        /* 课程卡片容器 */
        .course-item > a {
            position: relative;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head">
            <div class="logo"></div>
            <div class="text1">
                <h3>课程中心</h3>
            </div>
            <div class="search">
           <input type="text" placeholder="搜索课程...">
           <a href="#" class="text1"><h4>搜 索</h4></a>
			</div>
       <div class="user">
        <a href="#">
            <img src="https://files.axshare.com/gsc/FJ8DAM/39/a5/67/39a567fd46a14808a29021e774cf76cd/images/职业画像/u537.svg" alt="">
            <span class="name">Cadoul</span>
        </a>
       </div>
        </div>

        <div class="mid">
            <ul>
                <li class="nav-item active" data-filter="all">全部课程</li>
                <li class="nav-item" data-filter="frontend">前端开发</li>
                <li class="nav-item" data-filter="backend">后端开发</li>
                <li class="nav-item" data-filter="free">免费课程</li>
                <li class="nav-item" data-filter="paid">付费课程</li>
				<li>实战课</li>
                <li>体系课</li>
                <li>直播</li>
                <li>企业服务</li>
            </ul>
        </div>

        <div class="box1">
            <!-- 修复图片路径错误（多余的双引号） -->
            <div class="banner">
                <img src="./images/course.png" alt="课程 banner">
                <div class="image-overlay"></div>
            </div>

            <div class="recommend">
                <ul>
                    <li><h4>推荐课程</h4></li>
                </ul>
            </div>

            <!-- 课程列表 -->
            <ul class="course">
                <!-- 前端开发-免费 -->
                <li class="course-item" data-type="frontend" data-price="free" data-name="HTML零基础入门">
                    <a href="https://www.bilibili.com/video/BV1x4411V75C/?spm_id_from=333.337.search-card.all.click&vd_source=867daf2d08ad33fe82620addeb41adfb" target="_blank">
                        <div class="s1">
                            <!-- 统一图片路径格式 -->
                            <img src="images/html.png" alt="HTML基础">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>HTML零基础入门</h5>
                            <p>适合新手的前端基础课程</p>
                        </div>
                    </a>
                </li>

                <!-- 前端开发-免费 -->
                <li class="course-item" data-type="frontend" data-price="free" data-name="CSS布局实战">
                    <a href="https://www.bilibili.com/video/BV1zN2UYoEEo/?spm_id_from=333.337.search-card.all.click" target="_blank">
                        <div class="s1">
                            <img src="images/css.png" alt="CSS进阶">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>CSS布局实战</h5>
                            <p>掌握Flex与Grid布局</p>
                        </div>
                    </a>
                </li>

                <!-- 前端开发-免费 -->
                <li class="course-item" data-type="frontend" data-price="free" data-name="JavaScript入门到精通">
                    <a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?spm_id_from=333.337.search-card.all.click" target="_blank">
                        <div class="s1">
                            <img src="images/js.png" alt="JavaScript教程">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>JavaScript入门到精通</h5>
                            <p>从基础语法到DOM操作</p>
                        </div>
                    </a>
                </li>

                <!-- 前端开发-免费 -->
                <li class="course-item" data-type="frontend" data-price="free" data-name="React基础教程">
                    <a href="https://www.bilibili.com/video/BV1wy4y1D7JT/?spm_id_from=333.337.search-card.all.click" target="_blank">
                        <div class="s1">
                            <img src="images/react.png" alt="React框架">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>React基础教程</h5>
                            <p>组件化开发入门</p>
                        </div>
                    </a>
                </li>

                <!-- 后端开发-免费 -->
                <li class="course-item" data-type="backend" data-price="free" data-name="Python语法入门">
                    <a href="https://www.bilibili.com/video/BV1rpWjevEip/?spm_id_from=333.337.search-card.all.click" target="_blank">
                        <div class="s1">
                            <img src="images/py.png" alt="Python基础">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>Python语法入门</h5>
                            <p>零基础学Python</p>
                        </div>
                    </a>
                </li>

                <!-- 后端开发-免费 -->
                <li class="course-item" data-type="backend" data-price="free" data-name="MySQL数据库基础">
                    <a href="https://www.bilibili.com/video/BV1Kr4y1i7ru/?spm_id_from=333.337.search-card.all.click" target="_blank">
                        <div class="s1">
                            <img src="images/sql.png" alt="数据库基础">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>MySQL数据库基础</h5>
                            <p>SQL语句入门到熟练</p>
                        </div>
                    </a>
                </li>

                <!-- 后端开发-免费 -->
                <li class="course-item" data-type="backend" data-price="free" data-name="Node.js入门教程">
                    <a href="https://www.bilibili.com/video/BV1TB6mY9EuP/?spm_id_from=333.337.search-card.all.click&vd_source=867daf2d08ad33fe82620addeb41adfb" target="_blank">
                        <div class="s1">
                            <img src="images/node.png" alt="Node.js开发">
                            <span class="free-badge">免费</span>
                        </div>
                        <div class="text1">
                            <h5>Node.js入门教程</h5>
                            <p>服务器端JavaScript</p>
                        </div>
                    </a>
                </li>

                <!-- 后端开发-付费 -->
                <li class="course-item" data-type="backend" data-price="paid" data-name="Java企业级开发">
                    <a href="#paid-course">
                        <div class="s1">
                            <img src="images/springboot.png" alt="Java开发">
                        </div>
                        <div class="text1">
                            <h5>Java企业级开发</h5>
                            <p>SpringBoot实战教程</p>
                            <span>¥299</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 移除重复的image-overlay并修正闭合标签 -->
    </div>

    <script>
        // 保留所有功能，优化筛选时的紧凑性
        const navItems = document.querySelectorAll('.nav-item');
        const courseItems = document.querySelectorAll('.course-item');
        const searchInput = document.querySelector('.search input');
        const searchBtn = document.querySelector('.search-btn');
        
        let currentFilter = 'all';
        
        // 导航点击事件 - 增加切换动画
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                navItems.forEach(nav => nav.classList.remove('active'));
                item.classList.add('active');
                // 添加导航切换动画效果
                item.style.transition = 'all 0.3s ease';
                currentFilter = item.getAttribute('data-filter');
                filterCourses();
            });
        });
        
        // 搜索功能
        function handleSearch() {
            const searchTerm = searchInput.value.toLowerCase().trim();
            filterCourses(searchTerm);
        }
        
        searchBtn.addEventListener('click', (e) => {
            e.preventDefault();
            handleSearch();
        });
        
        searchInput.addEventListener('keyup', (e) => {
            if (e.key === 'Enter') handleSearch();
        });
        
        // 筛选课程 - 确保紧凑排列并添加动画
        function filterCourses(searchTerm = '') {
            // 先隐藏所有课程
            courseItems.forEach(course => {
                course.classList.add('hidden');
            });
            
            // 收集可见课程
            const visibleCourses = [];
            courseItems.forEach(course => {
                const type = course.getAttribute('data-type');
                const price = course.getAttribute('data-price');
                const name = course.getAttribute('data-name').toLowerCase();
                
                // 基础筛选
                let show = false;
                if (currentFilter === 'all') show = true;
                else if (currentFilter === 'frontend') show = type === 'frontend';
                else if (currentFilter === 'backend') show = type === 'backend';
                else if (currentFilter === 'free') show = price === 'free';
                else if (currentFilter === 'paid') show = price === 'paid';
                
                // 搜索筛选
                if (searchTerm && show) {
                    show = name.includes(searchTerm);
                    const courseTitle = course.querySelector('h5');
                    const originalText = courseTitle.textContent;
                    
                    if (show) {
                        const regex = new RegExp(`(${searchTerm})`, 'gi');
                        courseTitle.innerHTML = originalText.replace(regex, '<span class="highlight">$1</span>');
                    } else {
                        courseTitle.innerHTML = originalText;
                    }
                } else {
                    const courseTitle = course.querySelector('h5');
                    courseTitle.innerHTML = courseTitle.textContent;
                }
                
                if (show) visibleCourses.push(course);
            });
            
            // 按顺序显示，确保紧凑无空隙，添加错开的动画效果
            visibleCourses.forEach((course, index) => {
                setTimeout(() => {
                    course.classList.remove('hidden');
                    // 免费课程添加额外的强调动画
                    if (course.getAttribute('data-price') === 'free') {
                        course.style.animation = 'none';
                        course.offsetHeight; // 触发重绘
                        course.style.animation = 'fadeIn 0.5s ease-out, pulse 1s ease-in-out';
                    }
                }, index * 50);
            });
        }
        
        // 添加免费课程的脉冲动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes pulse {
                0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.4); }
                70% { box-shadow: 0 0 0 10px rgba(46, 125, 50, 0); }
                100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
            }
        `;
        document.head.appendChild(style);
        
        // 页面加载初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 初始加载时突出显示免费课程
            setTimeout(() => {
                document.querySelectorAll('.course-item[data-price="free"]').forEach(course => {
                    course.style.animation = 'none';
                    course.offsetHeight; // 触发重绘
                    course.style.animation = 'fadeIn 0.5s ease-out, pulse 1.5s ease-in-out';
                });
            }, 1000);
        });
    </script>
</body>
</html>
